<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>教程模板
    </title>
    <style>
/* 模态框样式 */
.modal {
    display: none; /* 默认隐藏模态框 */
    position: fixed; /* 固定定位，覆盖整个页面 */
    z-index: 1; /* 确保模态框显示在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 当内容溢出时显示滚动条 */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明背景 */
}
/* 让放大的图片水平、垂直居中 */
.modal-content {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
    /*-- 页面背景颜色 */
body {
    background-color: #dbdbdb;
}
    /*-- 文本框样式 */
aside {
    max-width: 960px;
    min-width: 300px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
}
    /*-- 响应式图片 */
img {
    max-width: 100%;
    height: auto;
}
</style>
  </head>
  <body>
    <aside class="imgBox"> 你<br>
      <img src=""
alt="" height="197" width="793"><br>
      好
    </aside>
    <!-- 以下代码用于查看原图不可乱动 -->
    <!-- 关闭按钮 -->
    <div id="modal" class="modal">
      <!-- 用于放大查看的图片 --> <img class="modal-content" id="modalImage">
    </div>
    <!-- 引入JavaScript文件 -->
    <script>
// 获取模态框
var modal = document.getElementById("modal");

// 获取模态框中的图片元素
var modalImg = document.getElementById("modalImage");

// 获取所有具有 zoomable 类的图片
var images = document.querySelectorAll(".imgBox img");

// 为每张图片添加点击事件监听器
images.forEach(function (image) {
    image.addEventListener("click", function () {
        modal.style.display = "block"; // 显示模态框
        modalImg.src = this.src; // 将点击的图片路径设置到模态框的图片中
    });
});

// 获取关闭按钮
var span = document.querySelector(".modal");

// 当用户点击关闭按钮时，隐藏模态框
span.addEventListener("click", function () {
    modal.style.display = "none";
});

// 当用户点击模态框外部区域时，隐藏模态框
modal.addEventListener("click", function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
});
</script>
  </body>
</html>